<template>
  <div class="columns">
    <div class="column">
      <oolongForm ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <oolongFormItem label="姓名" prop="name">
          <oolongInput v-model="formValidate.name" placeholder="请输入姓名"></oolongInput>
        </oolongFormItem>
        <oolongFormItem label="邮箱" prop="mail">
          <oolongInput v-model="formValidate.mail" placeholder="请输入邮箱"></oolongInput>
        </oolongFormItem>
        <oolongFormItem label="城市" prop="city">
          <oolongSelect v-model="formValidate.city" placeholder="请选择所在地">
            <oolongOption value="beijing">北京市</oolongOption>
            <oolongOption value="shanghai">上海市</oolongOption>
            <oolongOption value="shenzhen">深圳市</oolongOption>
          </oolongSelect>
        </oolongFormItem>
        <oolongFormItem label="选择日期">
          <div class="columns">
            <div class="column">
              <oolongDatePicker type="date" placeholder="选择日期" v-model="formValidate.date"></oolongDatePicker>
            </div>
            <div class="column is-1" style="text-align: center">-</div>
            <div class="column ">
              <oolongTimePicker type="time" placeholder="选择时间" v-model="formValidate.time"></oolongTimePicker>
            </div>
          </div>
        </oolongFormItem>
        <oolongFormItem label="性别" prop="gender">
          <oolongRadioGroup v-model="formValidate.gender">
            <oolongRadio label="male">男</oolongRadio>
            <oolongRadio label="female">女</oolongRadio>
          </oolongRadioGroup>
        </oolongFormItem>
        <oolongFormItem label="爱好" prop="interest">
          <oolongCheckboxGroup v-model="formValidate.interest">
            <oolongCheckbox label="吃饭"></oolongCheckbox>
            <oolongCheckbox label="睡觉"></oolongCheckbox>
            <oolongCheckbox label="跑步"></oolongCheckbox>
            <oolongCheckbox label="看电影"></oolongCheckbox>
          </oolongCheckboxGroup>
        </oolongFormItem>
        <oolongFormItem label="介绍" prop="desc">
          <oolongInput v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                       placeholder="请输入..."></oolongInput>
        </oolongFormItem>
        <oolongFormItem>
          <oolongButton type="primary" @click="handleSubmit('formValidate')">提交</oolongButton>
          <oolongButton type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</oolongButton>
        </oolongFormItem>
      </oolongForm>
    </div>
    <div class="column"></div>
    <div class="column"></div>
  </div>

</template>
<script>
import Emitter from '../mixins/emitter';

export default {
  mixins: [Emitter],
  data() {
    return {
      formValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      ruleValidate: {
        name: [
          {required: true, message: '姓名不能为空', trigger: 'blur'}
        ],
        mail: [
          {required: true, message: '邮箱不能为空', trigger: 'blur'},
          {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
        ],
        city: [
          {required: true, message: '请选择城市', trigger: 'change'}
        ],
        gender: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        interest: [
          {required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change'},
          {type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change'}
        ],
        date: [
          {required: true, type: 'date', message: '请选择日期', trigger: 'change'}
        ],
        time: [
          {required: true, type: 'date', message: '请选择时间', trigger: 'change'}
        ],
        desc: [
          {required: true, message: '请输入个人介绍', trigger: 'blur'},
          {type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('提交成功!');
        } else {
          this.$Message.error('表单验证失败!');
        }
      })
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
}
</script>
